<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐社区 - {% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <style>
        /* 基础样式 */
        body {
            margin: 0;
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
        }

        header {
            background: #2c3e50;
            color: white;
            padding: 1rem;
        }

        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            gap: 2rem;
        }

        nav a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }

        nav a:hover {
            color: #3498db;
        }

        .flash-messages {
            padding: 1rem;
        }

        .alert {
            padding: 0.75rem 1.25rem;
            border-radius: 4px;
            margin: 1rem 0;
        }

        .alert-error {
            background: #f8d7da;
            color: #721c24;
        }

        main {
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        /* 全局过渡动画 */
        .page-transition {
            animation: fadeOut 0.3s forwards;
        }

        @keyframes fadeOut {
            from { opacity: 1 }
            to { opacity: 0 }
        }

        /* 可视化公共样式 */
        .visualizer-canvas {
            width: 100%;
            height: 100px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="{{ url_for('index') }}">🎵 首页</a></li>
                {% if current_user.is_authenticated %}
                    <li><a href="{{ url_for('create_playlist') }}">📁 新建歌单</a></li>
                    <li><a href="{{ url_for('song_list') }}">🎶 所有歌曲</a></li>
                    <li><a href="{{ url_for('logout') }}">🔒 注销 ({{ current_user.username }})</a></li>
                {% else %}
                    <li><a href="{{ url_for('login') }}">🔑 登录</a></li>
                    <li><a href="{{ url_for('register') }}">📝 注册</a></li>
                {% endif %}
            </ul>
        </nav>
    </header>

    <div class="flash-messages">
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }}">{{ message }}</div>
                {% endfor %}
            {% endif %}
        {% endwith %}
    </div>

    <main>
        {% block content %}{% endblock %}
    </main>

    <footer style="text-align: center; padding: 2rem; background: #f5f5f5;">
        <p>© 2024 音乐社区 | 让音乐连接你我</p>
    </footer>
</body>
 <script>
        // 页面跳转逻辑
        function navigateToDetail(filename) {
            document.body.classList.add('page-transition');
            setTimeout(() => {
                window.location.href = `/song/${encodeURIComponent(filename)}`;
            }, 300);
        }

        // 预加载机制
        window.addEventListener('load', () => {
            document.querySelectorAll('.song-item').forEach(item => {
                const link = document.createElement('link');
                link.rel = 'prefetch';
                link.href = `/song/${item.dataset.filename}`;
                document.head.appendChild(link);
            });
        });
    </script>
</html>
